<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 1.引入vue.js -->
    <script src="./vue.js"></script>

    <!-- 2. 定义模板,未来vue创建出来的元素会插入到模板中. 想要在页面上渲染什么结构,就直接在模板中定义即可-->
    <div id="app" @click.self="show" style="background-color: skyblue">
      <!-- 注意: 模板中可以直接使用当前模板所绑定的那个vue实例上的所有的属性和方法 -->
      <h1>绑定事件</h1>
      <button v-on:click="show" data-id="xxx">点我展示信息(v-on绑定)</button
      ><br /><br />
      <!-- @是v-on: 的简写 -->
      <button @click="show">点我展示信息(@绑定)</button><br /><br />
      <!-- 如果要传递数据,不想丢失事件对象.则可以将$event传递参数列表中 -->
      <button v-on:click="show($event,'xxx',123)">点我展示信息(传递参数)</button
      ><br /><br />
      <a href="http://www.atguigu.com" @click.prevent="handle"
        >点我展示信息(阻止默认事件)</a
      ><br /><br />
      <button @click.stop.once="handle">点我展示信息(阻止冒泡)</button
      ><br /><br />
      <a href="http://www.atguigu.com" @click.prevent.once="handle"
        >点我展示信息(阻止默认事件+冒泡)</a
      ><br /><br />
      <input
        type="text"
        placeholder="按下回车键展示信息"
        @keydown.enter="showHandle"
      />
    </div>

    <!-- 3. 创建vue实例. vue实例可以帮我们管理模板(视图)和数据. 可以将数据插入到模板中,具体插入什么,插入到哪里是由程序员决定的-->
    <script>
      Vue.config.productionTip = false
      // 一般vue实例都会起名叫vm
      const vm = new Vue({
        // el绑定模板
        el: '#app',
        // 注意: 在创建vue实例的时候,data和methods中的属性和方法会自动往vue实例上添加一份
        //data定义模板中要使用的数据
        data: {
          msg: 'hello vue',
        },
        // vue中使用到的函数,应该写在methods中. 因为只有写在methods里面的函数,才能在模板中获取到
        methods: {
          show(e, v, x) {
            // 事件处理函数中接收的形参就是事件对象
            // console.log(e)
            // 在vue的事件处理函数中,this就是vue实例
            // console.log(this)
            // console.log(e.target.dataset.id);
            // console.log(e, v, x)
            console.log('show执行了')
          },
          // vue中函数非常不建议写成箭头函数,如果写了箭头函数,this就不能指向vue实例了
          // show: () => {
          //   console.log(this)
          // },

          handle(e) {
            // e.preventDefault()
            // e.stopPropagation()
            console.log('hnadle执行了')
          },

          showHandle(e) {
            console.log(e.target.value)
          },
        },
      })

      console.log('在外面答应的vue实例', vm)
    </script>
  </body>
</html>
